<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-bottom:1px solid #1b926c;
        }
        .navbar { border-radius:0; }
    </style>
</head>
<body>

 <div class="container">
     <div class="row">
         <nav class="navbar navbar-default navbar-static-top">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="../index.html">首页</a>
                 </div>
                 <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <h3>Demo1: angularjs ui router示例，参考：<a href="https://scotch.io/tutorials/angular-routing-using-ui-router" target="_blank">https://scotch.io/tutorials/angular-routing-using-ui-router</a> </h3>
     <div class="row demo">
        <div ng-app="routerApp">
            <!-- NAVIGATION -->
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                    <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a ui-sref="home">Home</a></li>
                    <li><a ui-sref="about">About</a></li>
                </ul>
            </nav>
            <!-- MAIN CONTENT -->
            <div class="container">
                <div ui-view></div>
            </div>
        </div>
     </div>
 </div>
</body>
</html>
<script src="../static/js/angular-1.3.15/angular.js" type="text/javascript"></script>
<script src="../static/js/angular-ui-router-0.2.4/angular-ui-router.js"></script>
<script>
    var routerApp = angular.module('routerApp', ['ui.router']);

    routerApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            // HOME STATES AND NESTED VIEWS ========================================
                .state('home', {
                    url: '/home',
                    templateUrl: 'partial-home.html'
                })

            // nested list with custom controller
                .state('home.list', {
                    url: '/list',
                    templateUrl: 'partial-home-list.html',
                    controller: function($scope) {
                        $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
                    }
                })

            // nested list with just some random string data
                .state('home.paragraph', {
                    url: '/paragraph',
                    template: 'I could sure use a drink right now.'
                })

            // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
                .state('about', {
                    url: '/about',
                    views: {
                        // the main template will be placed here (relatively named)
                        '': { templateUrl: 'partial-about.html' },
                        // the child views will be defined here (absolutely named)
                        'columnOne@about': { template: 'Look I am a column!' },
                        // for column two, we'll define a separate controller
                        'columnTwo@about': {
                            templateUrl: 'table-data.html',
                            controller: 'scotchController'
                        }
                    }
                });
    });

    // let's define the scotch controller that we call up in the about state
    routerApp.controller('scotchController', function($scope) {
        $scope.message = 'test';
        $scope.scotches = [
            {
                name: 'Macallan 12',
                price: 50
            },
            {
                name: 'Chivas Regal Royal Salute',
                price: 10000
            },
            {
                name: 'Glenfiddich 1937',
                price: 20000
            }
        ];

    });
</script>
